import React from 'react';
import { Space, Row, Col, Typography } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Input } from '../index';
import { useInputStyles } from '../style';

const { Text } = Typography;

const App: React.FC = () => {
  const { styles } = useInputStyles();

  return (
    <Space direction="vertical" size={40} style={{ width: '100%' }}>
      {/* 基础输入框 */}
      <div>
        <Text strong style={{ fontSize: 14, display: 'block', marginBottom: 16 }}>● 基础输入框</Text>
        
        {/* Normal 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>normal</Text>
              </div>
              <Input placeholder="请输入" />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input placeholder="请输入" />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>未输入</Text>
              </div>
              <Input placeholder="请输入" />
            </div>
          </Col>
        </Row>

        {/* Hover 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>hover</Text>
              </div>
              <Input 
                placeholder="请输入" 
                className={styles.mockHover}
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                placeholder="输入值" 
                defaultValue="234"
                allowClear
                className={styles.mockHover}
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>已输入-可删除</Text>
              </div>
              <Input 
                defaultValue="234"
                allowClear
                className={styles.mockHover}
              />
            </div>
          </Col>
        </Row>

        {/* Focus 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>focus</Text>
              </div>
              <Input 
                placeholder="请输入" 
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                placeholder="输入值" 
                defaultValue="234"
                allowClear
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>已输入-可删除</Text>
              </div>
              <Input 
                defaultValue="234"
                allowClear
                className={styles.mockFocus}
              />
            </div>
          </Col>
        </Row>

        {/* Wrong 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>wrong</Text>
              </div>
              <Input 
                placeholder="请输入" 
                status="error"
              />
              <Text type="danger" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>异常解释</Text>
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                placeholder="输入值" 
                defaultValue="234"
                allowClear
                status="error"
              />
              <Text type="danger" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>异常解释</Text>
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>已输入-可删除</Text>
              </div>
              <Input 
                defaultValue="234"
                allowClear
                status="error"
              />
            </div>
          </Col>
        </Row>

        {/* Disable 状态行 */}
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>disable</Text>
              </div>
              <Input 
                placeholder="请输入" 
                disabled
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                defaultValue="234"
                disabled
              />
            </div>
          </Col>
          <Col span={8}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>已输入-可删除</Text>
              </div>
              <Input 
                defaultValue="234"
                disabled
              />
            </div>
          </Col>
        </Row>
      </div>

      {/* 搜索框 */}
      <div>
        <Text strong style={{ fontSize: 14, display: 'block', marginBottom: 16 }}>● 搜索框</Text>
        
        {/* Normal 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>normal</Text>
              </div>
              <Input 
                placeholder="输入关键字搜索" 
                suffix={<SearchOutlined />}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>搜索1-已输入</Text>
              </div>
              <Input 
                defaultValue="234"
                allowClear
                suffix={<SearchOutlined />}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>搜索2（简图式）</Text>
              </div>
              <Input.Search 
                placeholder="输入关键字搜索"
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>搜索2-已输入（简图式）</Text>
              </div>
              <Input.Search 
                defaultValue="234"
                allowClear
              />
            </div>
          </Col>
        </Row>

        {/* Hover 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>hover</Text>
              </div>
              <Input 
                placeholder="输入关键字搜索" 
                suffix={<SearchOutlined />}
                className={styles.mockHover}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                defaultValue="234"
                allowClear
                suffix={<SearchOutlined />}
                className={styles.mockHover}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input.Search 
                placeholder="输入关键字搜索"
                className={styles.mockHover}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input.Search 
                defaultValue="234"
                allowClear
                className={styles.mockHover}
              />
            </div>
          </Col>
        </Row>

        {/* Focus 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>focus</Text>
              </div>
              <Input 
                placeholder="输入关键字搜索" 
                suffix={<SearchOutlined />}
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                defaultValue="234"
                allowClear
                suffix={<SearchOutlined />}
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input.Search 
                placeholder="输入关键字搜索"
                className={styles.mockFocus}
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input.Search 
                defaultValue="234"
                allowClear
                className={styles.mockFocus}
              />
            </div>
          </Col>
        </Row>

        {/* Wrong 状态行 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>wrong</Text>
              </div>
              <Input 
                placeholder="输入关键字搜索" 
                suffix={<SearchOutlined />}
                status="error"
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                defaultValue="234"
                allowClear
                suffix={<SearchOutlined />}
                status="error"
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input.Search 
                placeholder="输入关键字搜索"
                status="error"
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input.Search 
                defaultValue="234"
                allowClear
                status="error"
              />
            </div>
          </Col>
        </Row>

        {/* Disable 状态行 */}
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }}>
                <Text style={{ fontSize: 12 }}>disable</Text>
              </div>
              <Input 
                placeholder="输入关键字搜索" 
                suffix={<SearchOutlined />}
                disabled
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input 
                defaultValue="234"
                suffix={<SearchOutlined />}
                disabled
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input.Search 
                placeholder="输入关键字搜索"
                disabled
              />
            </div>
          </Col>
          <Col span={6}>
            <div>
              <div style={{ marginBottom: 8, height: 20 }} />
              <Input.Search 
                defaultValue="234"
                disabled
              />
            </div>
          </Col>
        </Row>
      </div>
    </Space>
  );
};

export default App;

